<template>
	<view class="orderList">
		<zhu-nav-bar title="租赁订单" bgColor="#fff" leftColor="#000" sizeColor="#111"></zhu-nav-bar>
		<view class="orderList-plate-1">
			<u-tabs :list="list" :is-scroll="false" bar-width="0" gutter="40" active-color="#367FFF" :current="current" @change="change"></u-tabs>
			<view class="tabsSort">
				<text :class="activeIndex == 0?'active':''" @click="onTabs(0)">下单时间由近到远</text>
				<text :class="activeIndex == 1?'active':''" @click="onTabs(1)">下单时间由远到近</text>
			</view>
		</view>
		<view class="orderList-plate-2">
			<view class="content">
				<order-title state="待发货" orderNum="E48129471085092853" rightText="12-18 16:37:48下单"></order-title>
				<order-goods :goodsImgUrl="require('@/static/img/financial/financial-top-bg.png')" goodsName="babycare儿童点读笔通用英语学习
点读机幼儿小孩早教故事机益智" goodsDesc="点读笔16G+5张挂卡+16本书" goodsPrice="339.00" goodsNum="1" @click.native="goOrderDetail"></order-goods>
				<order-pay-price goodsNum="1"></order-pay-price>
				<order-address address="陆** 186****1231 河南省郑州市金水区花园北路省直花园小区1单号楼1单元111" code="000000"></order-address>
				<view class="btm-btn" v-if="current == 0">
					<view class="btn-box">
						<navigator url="../orderList/orderDetail/logistics/logistics" open-type="navigate" hover-class="none">
							<view class="btn">发货</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import zhuNavBar from '@/pages/components/zhuNavBar.vue'
	import orderTitle from '@/pages/components/orderTitle.vue'
	import orderGoods from '@/pages/components/orderGoods.vue'
	import orderPayPrice from '@/pages/components/orderPayPrice.vue'
	import orderAddress from '@/pages/components/orderAddress.vue'
	export default {
		data() {
			return {
				list: [{
					name: '待发货',
					count: 1
				}, {
					name: '租赁中',
					count: 1
				}, {
					name: '待归还',
					count: 1
				}, {
					name: '已归还',
					count: 4
				}],
				current: 0,
				activeIndex:0,
			};
		},
		components: {
			zhuNavBar,
			orderTitle,
			orderGoods,
			orderPayPrice,
			orderAddress
		},
		methods: {
			// 跳转到详情页
			goOrderDetail(){
				uni.navigateTo({
					url:'rentDetail/rentDetail'
				})
			},
			// 操作自定义tabs
			onTabs(num){
				this.activeIndex = num
			},
			// 操作组件tabs
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		width: 100vw;
		min-height: 100vh;
		background-color: #f9f9f9;

		.orderList-plate-1 {
			padding-top: calc(88rpx + var(--status-bar-height));
			.tabsSort{
				width: 750rpx;
				height: 70rpx;
				background: #ffffff;
				padding: 0 97rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}
				.active{
					font-size: 28rpx;
					font-weight: 500;
					color: #111111;
				}
			}
		}
		.orderList-plate-2{
			margin-top: 30rpx;
			.content{
				.btm-btn{
					background-color: #fff;
					padding: 0 30rpx;
					.btn-box{
						border-top: 1rpx solid #eee;
						height: 104rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.btn{
							width: 160rpx;
							height: 50rpx;
							background: #ffffff;
							border: 1px solid #999999;
							border-radius: 25rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

				}
			}
		}
	}
</style>
